<template>
  <div>
    <Title :title="title"></Title>
    <div ref="right1" style="height: 210px; margin-top: 20px;"></div>
  </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      title: '实时湿度曲线',
      params: {
        page: 1,
        pageSize: 100,
      },
      TempData: [],
      line: null,
    }
  },
  computed: {
    ...mapState(['ed']),
  },
  watch: {
    ed: {
      handler(n, o) {
        // 根据设备信息重新查询数据 渲染图表
        this.params.engineer_id = n.engineer_id;
        this.params.device_id = n.device_id;
        this.getHumData();
        // 根据最新获取的数据重新渲染图表
        this.dualAxes.changeData([this.TempData, this.TempData]);
      },
      // 深度侦听
      deep: true,
    }
  },
  methods: {
    loadLine() {
      this.dualAxes = new DualAxes(this.$refs.right1, {
        data: [this.TempData, this.TempData],
        xField: 'insert_time',
        yField: ['temperature', 'humidity'],
        xAxis: {
          label: {
            style: {
              fill: "white",
              fontSize: 12,
            },
          },
        },
        yAxis: [
          {
            label: {
              style: {
                fill: "white",
                fontSize: 13,
              },
            },
          },
          {
            label: {
              style: {
                fill: "white",
                fontSize: 13,
              },
            },
          },
        ],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5DE2E7',
          },
          {
            geometry: 'line',
            color: '#CC6CE7',
          },
        ],
        legend: {
          position: 'top-right',
        },
        smooth: true,
                animation: {
                    appear: {
                        animation: 'wave-in',
                        duration: 5000,
                    },
                },
        tooltip: {
          showMarkers: true,
          domStyles: {
            "g2-tooltip": {
              background: "#ccc",
              color: "pink",
              fontSize: 15,
            },
          },
        },

      });

      this.dualAxes.render();
    },
    async getHumData() {
      let res = await get('/dashboard/pageQueryTodayData', this.params);
      let temp = [];
      res.data.list.forEach((item, index, arr) => {
        arr[0].temperature = 15;
        arr[0].humidity = 30;
        item.insert_time = moment(item.insert_time).format('HH:mm');
        if (index % 10 == 0) {
          temp.push(arr[index])
        }
      });
      this.TempData = temp;
    },
  },

  async mounted() {
    await this.getHumData();
    this.loadLine();
  },
}
</script>
<style lang="less" scoped></style>